<template>
  <div v-if="visible" class="modal-overlay" @click.self="handleClose">
    <div class="modal-container">
      <div class="modal-header">
        <h3>{{ isEditMode ? '编辑任务' : '任务详情' }}</h3>
        <button class="modal-close-btn" @click="handleClose">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      
      <div v-if="task" class="modal-body">
        <!-- 编辑模式 -->
        <template v-if="isEditMode">
          <div class="task-detail-item">
            <label class="detail-label">任务标题：</label>
            <input type="text" class="form-control" v-model="editForm.title" placeholder="请输入任务标题">
          </div>
          <div class="task-detail-item">
            <label class="detail-label">任务类型：</label>
            <select class="form-control" v-model="editForm.taskType">
              <option value="数据处理">数据处理</option>
              <option value="系统维护">系统维护</option>
              <option value="测试验证">测试验证</option>
              <option value="自定义任务">自定义任务</option>
            </select>
          </div>
          <div class="task-detail-item">
            <label class="detail-label">数据源配置：</label>
            <select class="form-control" v-model="editForm.dataSource">
              <option value="">请选择数据源配置</option>
              <option value="ds1">MySQL 数据源</option>
              <option value="ds2">PostgreSQL 数据源</option>
              <option value="ds3">MongoDB 数据源</option>
            </select>
          </div>
          <div class="task-detail-item">
            <label class="detail-label">流程定义：</label>
            <select class="form-control" v-model="editForm.processDefinition">
              <option value="">请选择流程定义</option>
              <option value="proc1">标准审批流程</option>
              <option value="proc2">快速部署流程</option>
              <option value="proc3">测试验证流程</option>
            </select>
          </div>
          <div class="task-detail-item">
            <label class="detail-label">任务状态：</label>
            <select class="form-control" v-model="editForm.status">
              <option value="pending">待处理</option>
              <option value="processing">处理中</option>
              <option value="completed">已完成</option>
              <option value="cancelled">已取消</option>
            </select>
          </div>
        </template>
        
        <!-- 查看模式 -->
        <template v-else>
          <div class="task-detail-item">
            <label class="detail-label">任务标题：</label>
            <span class="detail-value">{{ task.title }}</span>
          </div>
          <div class="task-detail-item">
            <label class="detail-label">任务类型：</label>
            <span class="detail-value">{{ task.taskType }}</span>
          </div>
          <div class="task-detail-item">
            <label class="detail-label">数据源配置：</label>
            <span class="detail-value">{{ task.dataSource ? getDataSourceName(task.dataSource) : '未设置' }}</span>
          </div>
          <div class="task-detail-item">
            <label class="detail-label">流程定义：</label>
            <span class="detail-value">{{ task.processDefinition ? getProcessName(task.processDefinition) : '未设置' }}</span>
          </div>
          <div class="task-detail-item">
            <label class="detail-label">任务状态：</label>
            <span class="detail-value status-badge" :class="`status-${task.status}`">
              {{ getStatusText(task.status) }}
            </span>
          </div>
          <div class="task-detail-item">
            <label class="detail-label">创建时间：</label>
            <span class="detail-value">{{ formatDate(task.createdAt) }}</span>
          </div>
          <!-- 可以根据需要添加更多任务详情字段 -->
        </template>
      </div>
      
      <div class="modal-footer">
        <template v-if="isEditMode">
          <button class="btn btn-secondary" @click="handleCancelEdit">取消</button>
          <button class="btn btn-primary" @click="handleSaveTask">保存</button>
        </template>
        <template v-else>
          <button class="btn btn-primary" @click="handleClose">确定</button>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  name: 'TaskDetailModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    task: {
      type: Object,
      default: null
    },
    isEditMode: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close', 'task-updated'],
  setup(props, { emit }) {
    // 编辑表单数据
    const editForm = ref({
      title: '',
      taskType: '',
      dataSource: '',
      processDefinition: '',
      status: ''
    });
    
    // 监听任务数据变化，更新编辑表单
    watch(() => props.task, (newTask) => {
      if (newTask && props.isEditMode) {
        editForm.value = {
          title: newTask.title || '',
          taskType: newTask.taskType || '',
          dataSource: newTask.dataSource || '',
          processDefinition: newTask.processDefinition || '',
          status: newTask.status || ''
        };
      }
    }, { immediate: true, deep: true });
    
    // 处理关闭
    const handleClose = () => {
      emit('close');
    };
    
    // 处理取消编辑
    const handleCancelEdit = () => {
      emit('close');
    };
    
    // 处理保存任务
    const handleSaveTask = () => {
      if (!editForm.value.title.trim()) {
        alert('请输入任务标题');
        return;
      }
      
      // 创建更新后的任务对象
      const updatedTask = {
        ...props.task,
        ...editForm.value,
        updatedAt: new Date().toISOString()
      };
      
      // 实际项目中可以调用更新任务API
      // updateTask(updatedTask)
      
      // 通知父组件任务已更新
      emit('task-updated', updatedTask);
      emit('close');
      
      alert('任务更新成功！');
    };
    
    // 获取数据源配置名称
    const getDataSourceName = (dataSourceId) => {
      const dataSourceMap = {
        'ds1': 'MySQL 数据源',
        'ds2': 'PostgreSQL 数据源',
        'ds3': 'MongoDB 数据源'
      };
      return dataSourceMap[dataSourceId] || dataSourceId;
    };
    
    // 获取流程定义名称
    const getProcessName = (processId) => {
      const processMap = {
        'proc1': '标准审批流程',
        'proc2': '快速部署流程',
        'proc3': '测试验证流程'
      };
      return processMap[processId] || processId;
    };
    
    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        'pending': '待处理',
        'processing': '处理中',
        'completed': '已完成',
        'cancelled': '已取消'
      };
      return statusMap[status] || status;
    };
    
    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return '';
      const date = new Date(dateString);
      return new Intl.DateTimeFormat('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      }).format(date);
    };
    
    return {
      editForm,
      handleClose,
      handleCancelEdit,
      handleSaveTask,
      getDataSourceName,
      getProcessName,
      getStatusText,
      formatDate
    };
  }
});
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.modal-close-btn:hover {
  background-color: #f0f0f0;
}

.modal-body {
  padding: 20px;
}

.task-detail-item {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;
}

.detail-label {
  width: 100px;
  font-weight: 500;
  color: #666;
  flex-shrink: 0;
}

.detail-value {
  flex: 1;
  color: #333;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-pending {
  background-color: #fff7e6;
  color: #fa8c16;
}

.status-processing {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-completed {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-cancelled {
  background-color: #fff2f0;
  color: #ff4d4f;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 表单控件样式 */
.form-control {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-control:focus {
  outline: none;
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
</style>